<!DOCTYPE html>
<html>
<head>
    <script src="js/global_data.js"></script>
    <!-- 代码编辑器导入文件-->
    <link rel="stylesheet" href="codemirror/lib/codemirror.css"/>
    <script src="codemirror/lib/codemirror.js"></script>
    <!-- 代码编辑器主题 -->
    <link href="codemirror/theme/3024-day.css" rel="stylesheet">
    <link href="codemirror/theme/3024-night.css" rel="stylesheet">
    <link href="codemirror/theme/abcdef.css" rel="stylesheet">
    <link href="codemirror/theme/ambiance-mobile.css" rel="stylesheet">
    <link href="codemirror/theme/ambiance.css" rel="stylesheet">
    <link href="codemirror/theme/base16-dark.css" rel="stylesheet">
    <link href="codemirror/theme/base16-light.css" rel="stylesheet">
    <link href="codemirror/theme/bespin.css" rel="stylesheet">
    <link href="codemirror/theme/blackboard.css" rel="stylesheet">
    <link href="codemirror/theme/cobalt.css" rel="stylesheet">
    <link href="codemirror/theme/colorforth.css" rel="stylesheet">
    <link href="codemirror/theme/darcula.css" rel="stylesheet">
    <link href="codemirror/theme/duotone-dark.css" rel="stylesheet">
    <link href="codemirror/theme/duotone-light.css" rel="stylesheet">
    <link href="codemirror/theme/eclipse.css" rel="stylesheet">
    <link href="codemirror/theme/elegant.css" rel="stylesheet">
    <!-- mode -->
    <script type="text/javascript" src="codemirror/mode/clike/clike.js"></script>
    <!-- 编辑 -->
    <script type="text/javascript" src="codemirror/addon/edit/closebrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/closetag.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/continuelist.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchtags.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/trailingspace.js"></script>
    <!-- hint -->
    <script type="text/javascript" src="codemirror/addon/hint/javascript-hint.js"></script>
    <script type="text/javascript" src="codemirror/addon/hint/show-hint.js"></script>
    <link href="codemirror/addon/hint/show-hint.css" rel="stylesheet">
    <!--支持代码折叠-->
    <link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css"/>
    <script src="codemirror/addon/fold/foldcode.js"></script>
    <script src="codemirror/addon/fold/foldgutter.js"></script>
    <script src="codemirror/addon/fold/brace-fold.js"></script>
    <script src="codemirror/addon/fold/comment-fold.js"></script>


    <title>赛事</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="backstage/css/style.css">
    <link rel="stylesheet" type="text/css" href="backstage/css/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
    <link rel="stylesheet" type="text/css" href="css/UserMatch.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<canvas id="cas" style="position: absolute;z-index : 0 "></canvas>
<body class="flat-blue">

<div id="codeSubmitBox" hidden="hidden">
    <p></p>
    <div>
        <img src="icon/close.png" class="codemirrorBox-closeIcon">
        <div id="codemirror-title">
            <h3>语言选择：</h3>
            <select class="form-control" id="codeLanguage">
                <option>c++(g++4.9.2)</option>
                <option>c(gcc4.9.2)</option>
                <option>java(jdk-1.8.0_202)</option>
            </select>

            <h3 style="margin-left: 100px;">主题选择：</h3>
            <select onchange="ChangeTheme()" class="form-control" id="codemirrorTheme">
                <option>base16-dark</option>
                <option>eclipse</option>
                <option>3024-day</option>
                <option>3024-night</option>
                <option>abcdef</option>
                <option>ambiance-mobile</option>
                <option>ambiance</option>
            </select>
        </div>
        <textarea id="codemirror" name="codemirror"></textarea>
        <button class="btn btn-info">提交代码</button>
    </div>
</div>

<div class="app-container">
    <div class="row content-container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-expand-toggle">
                        <i class="fa fa-bars icon"></i>
                    </button>
                    <ol class="breadcrumb navbar-breadcrumb">
                        <li class="active">个人信息</li>
                    </ol>
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-th icon"></i>
                    </button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-times icon"></i>
                    </button>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bell-o"></i></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="title">
                                系统通知 <span class="badge pull-right">0</span>
                            </li>
                            <li class="message">
                                没有新消息
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown danger">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-users"></i> 4</a>
                        <ul class="dropdown-menu danger  animated fadeInDown">
                            <li class="title">
                                好友列表 <span class="badge pull-right">3</span>
                            </li>
                            <li>
                                <ul class="list-group notifications">
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge">1</span> <i class="fa fa-mars icon"></i> 吴永康
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge success">1</span> <i class="fa fa-venus icon"></i> 李文俊
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item message">
                                            view all
                                        </li>
                                    </a>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown profile">
                        <a href="#" id="LoginOutTitleName" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="profile-img">
                                <img src="backstage/img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                            </li>
                            <li>
                                <div class="profile-info">
                                    <h4 class="username" id="LoginOutName"></h4>
                                    <p id="LoginOutEmail"></p>
                                    <div class="btn-group margin-bottom-2x" role="group">
                                        <button onclick="loginOut()" type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> 登出</button>
                                        <script>
                                            function loginOut() {
                                                localStorage.removeItem("userToken");
                                                window.location="login.html";
                                            }
                                        </script>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="side-menu sidebar-inverse">
            <nav class="navbar navbar-default" role="navigation">
                <div class="side-menu-container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <div class="icon fa fa-cloud"></div>
                            <div class="title">问题反馈</div>
                        </a>
                        <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav">
                        <!-- 被选中的框-->
                        <li>
                            <a href="userMessage.html">
                                <span class="icon fa fa-user"></span><span class="title">个人信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="CodeAndCode.html">
                                <span class="icon fa fa-file-code-o"></span><span class="title">代码对弈</span>
                            </a>
                        </li>

                        <li>
                            <a href="RobotLode.html">
                                <span class="icon fa fa-android"></span><span class="title">人机对弈</span>
                            </a>
                        </li>
                        <!--  提交列表-->
                        <li>
                            <a href="SubmitList.html">
                                <span class="icon fa fa-list"></span><span class="title">提交列表</span>
                            </a>
                        </li>

                        <li class="active">
                            <a href="#">
                                <span class="icon glyphicon glyphicon-stats"></span><span class="title">赛事</span>
                            </a>
                        </li>


                    </ul>
                </div>
            </nav>
        </div>



        <!-- Main Content -->
        <div class="container-fluid">
            <div id="mainArea" class="side-body padding-top">

                <!-- 展示user message时使用的界面***********************begin-->
                <div id="appOne">
                    <div class="no-margin-bottom row" id="ShowUserMessage">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6" id="mainBox">

                            <div id="matchChoose" hidden="hidden">
                                <p></p>
                                <ul class="nav nav-pills">
                                    <li role="presentation" class="active"><a>正在报名</a></li>
                                    <li role="presentation"><a>报名结束</a></li>
                                    <li role="presentation"><a>已完成</a></li>
                                </ul>
                            </div>

                            <h3>如遇到报名截止，请等待管理员处理！</h3>

                            <div class="MathMessageBox well" v-for="map in matchMessage">
                                <p hidden="hidden">{{map["id"]}}</p>
                                <div class="MatchMessageBox-titleIcon">{{map["result"]}}</div>
                                <h2 class="MatchMessageBox-title">{{map["title"]}}</h2>
                                <div class="row-line"></div>
                                <div class="MatchMessageBox-main">
                                    <p class="MatchMessageBox-JianJie">比赛简介：</p>
                                    <p class="MatchMessageBox-JianJieValue">&nbsp;&nbsp;&nbsp;&nbsp;{{map["describe"]}}</p>
                                    <p class="MatchMessageBox-data" style="color: green;">创建日期：{{map["createTime"]}}</p>
                                    <p class="MatchMessageBox-data" style="color: red">结束日期：{{map["endTime"]}}</p>
                                </div>
                                <button class="btn btn-danger MatchMessageBox-BaoMingBtn">立即报名</button>
                                <p class="MatchMessageBox-userNumber" hidden="hidden">{{map["nowNumber"]}}&nbsp;/&nbsp;{{map["userNumber"]}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    let app = new Vue({
                        el: '#appOne',
                        data: {
                            matchMessage: {}
                        },
                        mounted: async function () {
                            this.matchMessage = await this.loadData();
                            this.$nextTick(function () {
                                LoadPage();
                            })
                        },
                        methods: {
                            async loadData() {
                                let postData = {};
                                postData['userToken'] = localStorage.getItem("userToken");
                                const res = await axios.post(serverIpAddress+"Match/toUserMatch",postData);
                                return res.data;
                            }
                        }
                    });
                </script>

            </div>
        </div>
    </div>

    <!-- Javascript Libs -->
    <script src="js/sweet-alert.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="backstage/js/app.js"></script>
    <script type="text/javascript" src="backstage/js/index.js"></script>

    <script type="text/javascript" src="js/UserMatch.js"></script>
</div></body>
</html>
<script>
    var editor;//代码编辑器
    var nowOptionMatchId; //当前操作的比赛id

    function LoadPage() {
        var $div = $("#mainBox>div");
        for(var i = 0; i < $div.length; i++){
            if($($div[i]).children("div:first").text() === "正在进行"){
                $($div[i]).children("div:first").css("backgroundImage","url(\"icon/UserMatchHeadBlue.png\")");
                $($div[i]).children("button").hide();
                $($div[i]).hide();
            }else if($($div[i]).children("div:first").text() === "已完成"){
                $($div[i]).children("div:first").css("backgroundImage","url(\"icon/UserMatchHeadGreen.png\")");
                $($div[i]).children("button").text("查看结果");
                $($div[i]).children("button").attr("class","btn btn-success MatchMessageBox-BaoMingBtn");
                $($div[i]).hide();
            }else if($($div[i]).children("div:first").text() === "正在报名")
            {
                var nowData = new Date();
                var endTimeStr = $($div[i]).children("div:last").children("p:last").text();
                endTimeStr = endTimeStr.substring(endTimeStr.indexOf("：") + 1).replace(/-/g, "/");
                var endTime = new Date(endTimeStr);
                if(endTime.getTime() + 86400000 < nowData.getTime()) {
                    $($div[i]).children("div:first").text("报名截止");
                    $($div[i]).children("div:first").css("backgroundImage","url(\"icon/UserMatchHeadBlue.png\")");
                    $($div[i]).children("button").attr("class","btn btn-info MatchMessageBox-BaoMingBtn");
                    let postData = $($div[i]).children("p:first").text();
                    $.ajax({
                        async: false,
                        url: serverIpAddress+"Match/matchDataPass",
                        data: postData,
                        type: "post",
                        contentType: "application/text;charset=utf-8"
                    });
                    $($div[i]).hide();
                }

                $($div[i]).children("p:last").show();
                var title = $($div[i]).children("h2").text();
                if(title.indexOf("##codeNull##") !== -1) {
                    $($div[i]).children("button").text("提交代码");
                    title = title.substring(0, title.indexOf("##codeNull##"));
                    $($div[i]).children("h2").text(title);
                }else if(title.indexOf("##userNull##") !== -1){
                    $($div[i]).children("button").text("立即报名");
                    title = title.substring(0,title.indexOf("##userNull##"));
                    $($div[i]).children("h2").text(title);

                    if(endTime.getTime() + 86400000 < nowData.getTime()){
                        $($div[i]).children("button").text("报名截止");
                        $($div[i]).children("button").attr("disabled", "disabled");
                        $($div[i]).children("button").css("opacity","0.4");
                    }
                }else
                    $($div[i]).children("button").text("修改代码");
            }
            else if($($div[i]).children("div:first").text() === "报名结束" || $($div[i]).children("div:first").text() === "报名截止"){
                var titleTwo = $($div[i]).children("h2").text();
                $($div[i]).children("p:last").show();
                $($div[i]).children("div:first").css("backgroundImage","url(\"icon/UserMatchHeadBlue.png\")");
                $($div[i]).children("button").attr("class","btn btn-info MatchMessageBox-BaoMingBtn");
                if(titleTwo.indexOf("##codeNull##") !== -1) {
                    $($div[i]).children("button").text("提交代码");
                    title = titleTwo.substring(0, titleTwo.indexOf("##codeNull##"));
                    $($div[i]).children("h2").text(title);
                }else if(titleTwo.indexOf("##userNull##") !== -1) {
                    $($div[i]).children("button").text($($div[i]).children("div:first").text());
                    $($div[i]).children("button").attr("disabled","disabled");
                    $($div[i]).children("button").css("opacity","0.4");
                    titleTwo = titleTwo.substring(0, titleTwo.indexOf("##userNull##"));
                    $($div[i]).children("h2").text(titleTwo);
                }else{
                    $($div[i]).children("button").text("修改代码");
                }
                $($div[i]).hide();
            }
        }

        $("#mainBox button").click(function () {
            var soon = $(this).parent().children("p:first").text();
            let postData = {};
            postData["userToken"] = localStorage.getItem("userToken");
            postData["data"] = soon;
            this.disabled = "disabled";
            if(this.innerText === "立即报名"){
                $.ajax({
                    async: false,
                    url: serverIpAddress+"Match/insertMatchUser",
                    data: JSON.stringify(postData),
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    dataType: "text",
                    success: function (data) {
                        postData = data;
                    }
                });
                if(postData === "fail"){
                    swal("错误","报名人数已满","error");
                }else if(postData === "exist"){
                    swal("错误","你已经报名，请不要重复报名！","error");
                } else {
                    alert("报名成功");
                    window.location = "UserMatch.html";
                    return 0;
                }
            }
            else if(this.innerText === "提交代码"){
                $("body").css("overflow","hidden");
                $("#codeSubmitBox").show();
                $("#codeSubmitBox").css("top",window.pageYOffset);
                //加载代码编辑器
                if(editor === undefined) {
                    editor = CodeMirror.fromTextArea(document.getElementById("codemirror"), {
                        lineNumbers: true,
                        autofocus: true,
                        mode: 'text/x-c++src',
                        theme: 'eclipse',
                        matchBrackets: true,
                        autoCloseBrackets: true,
                        extraKeys: {"Ctrl": "autocomplete"},
                        lineWrapping: false
                    });
                    editor.setOption("theme", "base16-dark");
                }
                nowOptionMatchId = $(this).parent().children("p:first").text();
                editor.setValue("");
            }
            else if(this.innerText === "修改代码")
            {
                var userCode = {};
                var postValue = $(this).parent().children("p:first").text();
                let postData = {};
                postData['user'] = localStorage.getItem("userToken");
                postData['soon'] = postValue;
                $.ajax({
                    async: false,
                    url: serverIpAddress+"Match/getUserMatchCode",
                    data: JSON.stringify(postData),
                    type: "post",
                    contentType: "application/text;charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        userCode = data;
                    }
                });
                $("#codeSubmitBox").show();
                $("#codeSubmitBox").css("top",window.pageYOffset);
                //加载代码编辑器
                if(editor === undefined) {
                    editor = CodeMirror.fromTextArea(document.getElementById("codemirror"), {
                        lineNumbers: true,
                        autofocus: true,
                        mode: 'text/x-c++src',
                        theme: 'eclipse',
                        matchBrackets: true,
                        autoCloseBrackets: true,
                        extraKeys: {"Ctrl": "autocomplete"},
                        lineWrapping: false
                    });
                    editor.setOption("theme", "base16-dark");
                }
                editor.setValue(userCode.code);
                $("#codeLanguage").val(userCode.language);
                $("body").css("overflow","hidden");
                nowOptionMatchId = $(this).parent().children("p:first").text();
            }
            else if(this.innerText === "查看结果"){
                window.location = "MatchResult.html?id="+$(this).parent().children("p:first").text();
            }
            this.disabled = "";
        });

        $("#codeSubmitBox img").mousemove(function () {
            this.style.opacity = 1;
        });
        $("#codeSubmitBox img").mouseout(function () {
            this.style.opacity = 0.5;
        });
        $("#codeSubmitBox img").click(function () {
            $("body").css("overflow","");
            $("#codeSubmitBox").hide();
        });
        $("#codeSubmitBox button").click(function () {
            let postData = {};
            postData["language"] = $("#codeLanguage").val();
            postData["code"] = editor.getValue();
            postData["matchId"] = nowOptionMatchId;
            postData["userToken"] = localStorage.getItem("userToken");
            $.ajax({
                async: false,
                url: serverIpAddress+"Match/userSubmitCode",
                data: JSON.stringify(postData),
                type: "post",
                contentType: "application/json;charset=utf-8"
            });
            alert("代码提交成功");
            window.location = "UserMatch.html";
        });
    }

    function ChangeTheme()
    {
        editor.setOption("theme",$("#codemirrorTheme").val());
    }

    // 判断用户有没有登录信息，没有的话自动登录跳转到登录页面
    let userMessage = {};
    $.ajax({
        async: false,
        type: "post",
        url: serverIpAddress+"User/LodeUserMessage",
        data: '{"userToken":"'+localStorage.getItem("userToken")+'"}',
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            userMessage = data;
        },
        error:function () {
            window.location="login.html";
        }
    });
    $("#LoginOutTitleName").html(userMessage.name+"<span class=\"caret\"></span>");
    $("#LoginOutName").html(userMessage.name);
    $("#LoginOutEmail").html(userMessage.email);

    $($("nav")[0]).mousemove(function () {
        $("#matchChoose").fadeIn(300);
    });

    $("#matchChoose a").click(function () {
        var $div = $("#mainBox>div");
        var i;
        var soon1 = this.innerText;
        var soon2 = "null";
        if (this.innerText === "正在报名") {
            $("#matchChoose li").removeClass("active");
            $(this).parent().addClass("active");
        } else if (this.innerText === "报名结束") {
            $("#matchChoose li").removeClass("active");
            $(this).parent().addClass("active");
            soon2 = "报名截止";
        } else {
            $("#matchChoose li").removeClass("active");
            $(this).parent().addClass("active");
            soon2 = "正在进行";
        }

        for (i = 1; i < $div.length; i++) {
            $($div[i]).show();
            var judgeStr = $($div[i]).children("div:first").text();
            if(judgeStr !== soon1 && judgeStr !== soon2){
                $($div[i]).hide();
            }
        }

        setTimeout("$('#matchChoose').fadeOut(400);",100);

    });
</script>
